<template>
	<view class="island-detail">

		<view class="top-background" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }">

		</view>



		<view class="info">

			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons :color="islandInfo.theme" @click="toBackPage" style="margin-left: 30rpx;" type="home"
					size="30">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" @click="toShareIsland" type="redo" size="30"
						:color="islandInfo.theme">
					</uni-icons>
				</view>
			</view>

			<view class="info-top">
				<view class="cover">
					<image mode="aspectFill" :src="islandInfo.background"></image>
				</view>
				<view class="info-top-right" :style="{'color': islandInfo.theme }">
					<view class="name">
						{{islandInfo.name}}
					</view>
					<view class="description">
						{{islandInfo.description}}
					</view>
				</view>


			</view>

			<view class="course-status">
				<view class="item" :style="{'color': islandInfo.theme }">
					<view class="item-top">
						{{islandInfo.userCount}}
					</view>
					<view class="item-bottom">
						成员
					</view>
				</view>
				<view class="split-line" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }"></view>
				<view class="item" :style="{'color': islandInfo.theme }">
					<view class="item-top">
						{{islandInfo.postCount}}
					</view>
					<view class="item-bottom">
						内容
					</view>
				</view>
				<view class="split-line" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }"></view>
				<view class="item" :style="{'color': islandInfo.theme }">
					<view class="item-top">
						{{islandInfo.postCount}}
					</view>
					<view class="item-bottom">
						精选
					</view>
				</view>
				<view class="split-line" :style="{'background-color': hexToRgba(islandInfo.theme,0.3) }"></view>
				<view class="item" :style="{'color': islandInfo.theme }">
					<view class="item-top">
						{{islandInfo.gmtCreate | gmtToHistoryDay}}
					</view>
					<view class="item-bottom">
						历史
					</view>
				</view>
			</view>



			<view class="content">
				
				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)">
						<view :style="{'color' : index==TabCur? islandInfo.theme : ''   }"
							:class="index==TabCur?'tab-text-on':'tab-text'">{{tabList[index]}}</view>
						<view v-if="index==TabCur" :style="{'background-color' : islandInfo.theme }" class="tab-line">
						</view>
					</view>
				</view>
				
				<view v-if="TabCur == 0">
					<view class="content-item">
						<view v-html="islandInfo.introduction" style="line-height: 50rpx;"></view>
					</view>
					
				</view>
				
				<view v-if="TabCur == 1">
					<view class="content-title">
						主理人
					</view>
					
					<view class="content-item">
					
					
						<view style="margin: 20rpx 0;">
							<userInfoCard :userInfo="islandInfo.userInfo"></userInfoCard>
						</view>
					</view>
					<view class="content-title">
						共创团队
					</view>
					
					<view class="content-item">
					
					
						<view style="margin: 20rpx 0;">
							<userInfoCard :userInfo="islandInfo.userInfo"></userInfoCard>
						</view>
					</view>
					
					<view class="content-title">
						专属知桨
					</view>
					
					<view class="content-item">
					
					
						<view class="spaces" v-if="islandInfo.courses && islandInfo.courses.length > 0">
							<view class="space" v-for="course in islandInfo.courses" @click="gotoCourseDetail(course.id)">
								<view class="space-cover">
									<image mode="aspectFill" :src="course.cover"></image>
								</view>
								<view class="space-name">{{course.name}}</view>
							</view>
						</view>
					</view>
				</view>
			
				
			
				<!-- 精选界面 -->
				<view class="posts" v-if="TabCur == 2">
					<view v-if="posts.length===0" style="width: 100%;text-align: center;margin-top: 40rpx;">
						暂时还没有精选
					</view>
				</view>
				<!-- 评价界面 -->
				<view class="evaluations" v-if="TabCur == 3">
					<view v-if="evaluationList.length===0" style="padding: 30rpx;text-align: center;font-size: 34rpx;">
						暂时还没有评价
					</view>
					<view class="evalusation" v-if="item.content" v-for="(item,index) in evaluationList" :key="index">
						<view class="evalusation-top">
							<view class="avatar">
								<image :src="item.avatar"></image>
							</view>
							<view>{{item.nickname}}</view>
						</view>
						<view style="margin-top: 10rpx;">{{item.content}}</view>
						<view
							style="margin-top: 10rpx;color: #00000059; font-size: 24rpx;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
							于 {{item.gmtCreate | gmtToDate}}</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="moneyInput" type="bottom">
			<view class="modal-box">
				<view class="modal-title">购买提示</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">支付任意金额</text>
						<input type="digit" v-model="order.money" placeholder="请输入您想支付的金额" />
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>



		<view class="footer">
			<view class="footer-item">
				<!-- <view class="text" v-if="islandInfo.price>0">￥ {{islandInfo.price}}</view> -->
				<view class="text" style="font-size: 36rpx;" v-if="islandInfo.price>0">￥ 任意</view>
				<view class="text" style="font-size: 36rpx;" v-else>免费</view>

				<view class="footer-button" :style="{'background-color' : islandInfo.theme }" @click="joinIsland()">
					立即加入
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				islandInfo: {
					userInfo: {
						avatar: ""
					}
				},
				posts: [],



				evaluationList: [],
				queryInput: {
					pageSize: 20,
					pageNow: 1,
					total: 0,
					islandId: null
				},



				isAll: false,
				showIndex: [],


				customButtonGroup1: [{
					text: '￥120 ' + '立即学习',
					backgroundColor: 'linear-gradient(90deg, #b2d0fe, #659FFE)',
					color: '#fff'
				}],
				TabCur: 0,
				scrollLeft: 0,
				tabList: ['介绍', '结构', '精选', '评价'],
				isShowIndex: [],
				openModal: false,


				order: {},

				paddingTop: null
			}
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			},
			gmtToHistoryDay(begin) {
				let today = Date.parse(new Date())
				return Math.trunc((today - parseInt(begin)) / (1 * 24 * 60 * 60 * 1000))
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.islandInfo.id = options.islandId
				this.queryInput.islandId = options.islandId
				this.getIslandInfo()
				this.getIslandEvaluationList()
			}


			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getIslandInfo() {
				this.$api.getIslandInfo({
					id: this.islandInfo.id
				}).then(res => {
					if (res.data.isBuy) {
						if (res.data.type == 0) {
							uni.redirectTo({
								url: '/pages_being/island/memory-island-detail?islandId=' + this.islandInfo
									.id
							})
						}
						if (res.data.type == 1) {
							uni.redirectTo({
								url: '/pages_being/island/post-island-detail?islandId=' + this.islandInfo
									.id
							})
						}
						if (res.data.type == 2) {
							uni.redirectTo({
								url: '/pages_being/island/article-island-detail?islandId=' + this
									.islandInfo.id
							})
						}
					}
					this.islandInfo = res.data;
					this.isShowIndex[0] = true
					this.isShowIndex[1] = true
				})
			},
			getIslandEvaluationList(courseId) {
				this.$api.pageIslandEvaluation(this.queryInput).then(res => {
					this.evaluationList = res.data.rows;
				})
			},
			collectOrCancel() {
				let courseId = this.courseInfo.id;
				this.$api.collectOrCancelCourse({
					courseId
				}).then(() => {
					this.getCourseInfo(courseId)
				})
			},
			joinIsland() {

				if (!this.$isLogin()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}

				let that = this
				let islandId = this.islandInfo.id

				if (this.islandInfo.price > 0) {
					this.$refs.moneyInput.open("bottom")
				} else {
					this.$api.joinIsland({
						islandId
					}).then(res => {
						uni.showModal({
							title: "加入成功",
							content: "是否将浪屿加入常驻，以后可以更快的找到它？",
							success(res) {
								if (res.confirm) {
									that.$api.fixIslandOrCancel({
										islandId
									})
								}
								if (that.islandInfo.type == 0) {
									uni.navigateTo({
										url: '/pages_being/island/memory-island-detail?islandId=' +
											islandId
									})
								}
								if (that.islandInfo.type == 1) {
									uni.navigateTo({
										url: '/pages_being/island/post-island-detail?islandId=' +
											islandId
									})
								}
								if (that.islandInfo.type == 2) {
									uni.navigateTo({
										url: '/pages_being/island/article-island-detail?islandId=' +
											islandId
									})
								}
							}
						})
					})
				}
			},




			modalConfirm() {
				let that = this
				if (this.order.money == null || this.order.money == 0) {
					uni.showModal({
						title: "提示",
						content: "输入金额不能为零或者为空"
					})
					return
				}
				this.order.productId = this.islandInfo.id
				this.order.productType = 0

				// #ifdef H5	
				this.order.payType = "WXPAY_MP"
				this.$api.purchaseOrder(this.order).then(res => {
					console.log(res.data)
				})
				// #endif

				// #ifdef APP
				// this.order.payType = "WXPAY_APP"
				// this.$api.purchaseOrder(this.order).then(res => {
				// 	console.log(res.data)
				// 	let orderInfo = {
				// 		"appid": res.data.appId, // 应用ID（AppID）
				// 		"partnerid": "1608185528", // 商户号（PartnerID）
				// 		"prepayid": res.data.prepayId, // 预支付交易会话ID
				// 		"package": res.data.package, // 固定值
				// 		"noncestr": res.data.nonceStr, // 随机字符串
				// 		"timestamp": res.data.timeStamp, // 时间戳（单位：秒）
				// 		"sign": res.data.paySign, // 签名，这里用的 MD5 签名
				// 	}

				// 	uni.requestPayment({
				// 		provider: "wxpay",
				// 		orderInfo: orderInfo,
				// 		success(res) {
				// 			uni.showToast({
				// 				title: '支付成功',
				// 				duration: 2000
				// 			});
				// 			that.paying = true
				// 		},
				// 		fail(err) {
				// 			console.log('fail:' + JSON.stringify(err));
				// 			console.log("支付失败");
				// 		}
				// 	})
				// })
				uni.showModal({
					title: "提示",
					content: "APP端暂不支持"
				})
				// #endif

				// #ifdef MP-WEIXIN
				this.order.payType = "WXPAY_MINI"

				this.$api.purchaseOrder(this.order).then(res => {
					let orderInfo = {
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						sign: res.data.paySign, // 签名，这里用的 MD5 签名
					}

					uni.requestPayment({
						appid: res.data.appId, // 应用ID（AppID）
						partnerid: "1608185528", // 商户号（PartnerID）
						prepayid: res.data.prepayId, // 预支付交易会话ID
						package: res.data.package, // 固定值
						nonceStr: res.data.nonceStr, // 随机字符串
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: "MD5",
						paySign: res.data.paySign, // 签名，这里用的 MD5 签名
						success(res) {
							uni.showModal({
								title: "加入成功",
								content: "是否将浪屿加入常驻，以后可以更快的找到它？",
								success(res) {
									if (res.confirm) {
										that.$api.fixIslandOrCancel({
											islandId: that.islandInfo.id
										})
									}
									if (that.islandInfo.type == 0) {
										uni.navigateTo({
											url: '/pages_being/island/memory-island-detail?islandId=' +
												that.islandInfo.id
										})
									}
									if (that.islandInfo.type == 1) {
										uni.navigateTo({
											url: '/pages_being/island/post-island-detail?islandId=' +
												that.islandInfo.id
										})
									}
									if (that.islandInfo.type == 2) {
										uni.navigateTo({
											url: '/pages_being/island/article-island-detail?islandId=' +
												that.islandInfo.id
										})
									}
								}
							})
						},
						fail(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
						}
					})
				})


				// #endif





				this.$refs.moneyInput.close("bottom")
			},
			modalCancel() {
				this.$refs.moneyInput.close("bottom")
			},



			toBackPage() {
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/self/self',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			tabSelect(index) {
				this.TabCur = index
				this.scrollLeft = (index - 1) * 60
			},
			likeOrCancel(evaluation) {
				this.$api.likeOrCancelEvaluation({
					id: evaluation.id
				}).then(() => {
					if (evaluation.isLiked) {
						evaluation.likeNum--
					} else {
						evaluation.likeNum++
					}
					evaluation.isLiked = !evaluation.isLiked
				})
			},
			handleIsAll() {
				this.isAll = !this.isAll
			},
			handleCommentIsShowIndex(index) {
				this.showIndex[index] = !this.showIndex[index]
				this.$forceUpdate()
				// this.$set(this.showIndex[index],index,!this.showIndex[index])
				console.log(this.showIndex)
			},
			handleCatalogIsShowIndex(index) {
				this.isShowIndex[index] = !this.isShowIndex[index]
				this.$forceUpdate()
			},
			onShareAppMessage: function(e) {
				return {
					title: "职研社",
					path: '/pages_course/course-detail/CourseDetail?courseId=' + this.courseInfo.id
				}
			},
			hexToRgba(hex, opacity) {
				if (hex) {
					return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," +
						parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.top-background {
		position: fixed;
		z-index: 1;

		width: 100%;
		height: 650rpx;

		background-repeat: no-repeat;
		background-size: cover;


		// .mask {
		// 	height: 100%;
		// 	width: 100%;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0rpx;
		// 	background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
		// 	z-index: 2;
		// }
	}

	.info {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;



		.back-arrow {
			width: 100%;
			//#ifdef MP-WEIXIN
			width: 550rpx;
			//#endif

			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif

			height: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}


		.info-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 670rpx;
			margin-left: 40rpx;
			margin-top: 80rpx;

			.cover {
				width: 280rpx;
				height: 180rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.info-top-right {
				width: 370rpx;
				height: 170rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;


				.name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.description {
					font-size: 30rpx;
				}
			}

		}

		.course-status {
			width: 670rpx;
			margin-left: 30rpx;
			padding: 40rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 150rpx;
				height: 100rpx;

				.item-top {
					font-size: 36rpx;
				}

				.item-bottom {
					font-size: 28rpx;
				}
			}

			.split-line {
				width: 5rpx;
				height: 60rpx;
				background-color: #dadada;
			}

		}




		.content {
			width: 100%;
			background-color: #F9F9F9;
			border-radius: 40rpx;
			margin-top: 20rpx;
			padding-bottom: 120rpx;
			min-height: 1000rpx;
			
			
			
			.tabs {
				margin-left: 40rpx;
				margin-top: 50rpx;
				width: 670rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			
				.tab {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 70rpx;
			
					.tab-text {
						font-size: 36rpx;
						color: gray;
					}
			
					.tab-text-on {
						font-size: 36rpx;
						font-weight: bold;
					}
			
					.tab-line {
						margin-top: 10rpx;
						width: 40rpx;
						height: 5rpx;
						border-radius: 50rpx;
					}
				}
			
			
			}
		
			
			

			.content-title {
				width: 670rpx;
				margin-left: 30rpx;
				margin-top: 40rpx;
				font-size: 36rpx;
				color: #2c2c2c;
			}


			.content-item {
				width: 670rpx;
				margin: 40rpx 30rpx;

				.spaces {

					display: flex;
					flex-direction: row;

					overflow-x: scroll;
					width: 670rpx;
					height: 245rpx;
					margin-top: 40rpx;

					.space {
						flex-shrink: 0;
						width: 260rpx;
						height: 230rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;

						display: flex;
						flex-direction: column;

						.space-cover {
							width: 260rpx;
							height: 160rpx;
							border-radius: 20rpx 20rpx 0 0;
							overflow: hidden;
						}

						.space-name {

							margin: 10rpx;
							font-size: 28rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 1;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}

					}
				}




			}







			.creators {
				width: 670rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;

				.main-creator {

					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 380rpx;
						height: 90rpx;

						.name {
							font-size: 36rpx;
						}

						.summary {
							font-size: 28rpx;
							color: gray;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/*连续的空白符会被合并,但文本内的换行无效*/
							white-space: nowrap;
						}

					}

					.button {
						width: 140rpx;
						height: 60rpx;
						background-color: #5DACB1;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						color: white;
						border-radius: 20rpx;
					}

				}

				.other-creator {
					display: flex;
					flex-direction: row;
				}


			}


			
			.tab-card {
				width: 670rpx;
				margin-left: 40rpx;
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
			}





			.posts {
				
			}

			.evaluations {
				display: flex;
				flex-direction: column;
				width: 670rpx;
				margin-left: 20px;
				margin-top: 40rpx;
				min-height: 1000rpx;
				margin-bottom: 160rpx;


				.evalusation {
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					background-color: #ffffff;
					margin-bottom: 30rpx;
					border-radius: 20RPX;

					.evalusation-top {
						display: flex;
						flex-direction: row;
						align-items: center;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 20rpx;
						}
					}



				}
			}
		}

	}

	.modal-box {
		width: 600rpx;
		margin-left: 35rpx;
		margin-bottom: 600rpx;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		text-align: left;


		.modal-title {
			margin-bottom: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}

		.modal-main {
			width: 100%;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;


			.modal-main-item {
				width: 100%;
				margin-bottom: 30rpx;

				.modal-key {
					display: block;

					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

			}

			.modal input,
			.modal .picker-input {
				box-sizing: border-box;
				margin: 10rpx 0;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;
				padding: 0 20rpx;
				background-color: aliceblue;

				line-height: 60rpx;
			}

		}

		.modal-operations {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 20rpx;

			text-align: center;
		}

		.modal-operations>view {
			font-weight: bold;
			padding: 10rpx;
			border-radius: 4rpx;

			width: 40%;
		}

	}

	.footer {
		position: fixed;
		background-color: #ffffff;
		height: 130rpx;
		width: 100%;
		bottom: 0;
		z-index: 3;
		border-top: solid thin #e7e7e7;

		display: flex;
		flex-direction: row;
		align-items: center;

		.footer-item {
			width: 650rpx;
			margin-left: 50rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 46rpx;
				font-weight: bold;

			}

			.footer-button {
				padding: 0 50rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #5DACB1;
				border-radius: 50rpx;
				color: white;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
